<template>
    <view>
        <u-navbar :isBack="true" title="关联逻辑" title-color="#101010"
        :background="{background: '#fff'}" :borderBottom="false"></u-navbar>
 
        <!--选择分类（无限级）-->
		<view>
			<view style="background: #fff;">
				<view style="padding: 15rpx 30rpx;">
					<view class="" style="align-items: center;width: 100%;">
						<u-search placeholder="请输入需要查询的手机号码" v-model="keyword" :show-action="false" @search="onSearch" 
						bg-color="#fbfbfb"></u-search>
					</view>
				</view>
				<!-- iskeyword -->
				<view style="padding: 0 32rpx;" v-if="iskeyword">
					<!-- <view style="display: flex;justify-content: center;padding: 40rpx;">
						<image :src="omeData.shop_qrcode" mode="aspectFill"
						style="width: 320rpx;height: 320rpx;"></image>
					</view> -->
					<view style="display: flex;align-items: center;">
						<view style="font-size: 30rpx;color: #111111;font-weight: bold;">{{ omeData.name }}</view>
						<!-- 0金色 1灰色 2绿色 3蓝色 4红色 -->
						<view style="margin-left: 20rpx;" v-if="omeData.identity == 2">
							<text style="font-size: 20rpx;color: #19be6b;background: #dbf1e1;
							padding: 4rpx 12rpx;border-radius: 8rpx;">注册用户</text>
						</view>
						<view style="margin-left: 20rpx;" v-if="omeData.identity == 3">
							<text style="font-size: 20rpx;color: #2979ff;background: #ecf5ff;
							padding: 4rpx 12rpx;border-radius: 8rpx;">推广达人</text>
						</view>
						<view style="margin-left: 20rpx;" v-if="omeData.identity == 4">
							<text style="font-size: 20rpx;color: #fa3534;background: #fef0f0;
							padding: 4rpx 12rpx;border-radius: 8rpx;">推广团长</text>
						</view>
						<view style="margin-left: 20rpx;" v-if="omeData.identity == 1">
							<text style="font-size: 20rpx;color: #909399;background: #f4f4f5;
							padding: 4rpx 12rpx;border-radius: 8rpx;">普通会员</text>
						</view>
						<view style="margin-left: 20rpx;" v-if="omeData.identity == 0">
							<text style="font-size: 20rpx;color: #ffea00;background: #fffff6;
							padding: 4rpx 12rpx;border-radius: 8rpx;">铁班底</text>
						</view>
					</view>
					<view style="color: #999CA3;font-size: 23rpx;">视频号：{{ omeData.shipinhao }}</view>
					<view style="color: #999CA3;margin-top: 12rpx;display: flex;justify-content: space-between;font-size: 23rpx;">
						<view>个人任务：
							<text v-if="omeData.task_sum > 9" style="color: #19be6b;">已完成</text>
							<text v-else>{{ omeData.task_sum }}</text>
						</view>
						<view>返佣订单数：{{ omeData.total_task }}单</view>
					</view>
					<view style="color: #999CA3;margin-top: 8rpx;display: flex;justify-content: space-between;font-size: 23rpx;">
						<view>
							<view>实际上级：{{ omeData.pid_name }}</view>
							<view>（{{ omeData.pid_phone }}）</view>
						</view>
						<view>
							<view>关联上级：{{ omeData.junior_name }}</view>
							<view>（{{ omeData.junior_phone }}）</view>
						</view>
					</view>
				</view>
				<u-tabs :list="tabs" name="junior_name" :current="currentIndex" @change="changeTabs"></u-tabs>
			</view>
			<view style="padding: 32rpx;">
				<view style="padding: 0rpx 24rpx;background: #fff;border-radius: 24rpx;">
					
					<view style="padding: 32rpx 0;display: flex;align-items: center;border-bottom: 2rpx #F5F5F5 solid;"
					v-for="(item, index) in calist" :key="index"
					:isLink="item.xjCount == 0 ? false : true" @click="toxiaji(item)">
						<!-- <image src="@/static/my/notop.png" mode="aspectFill" style="width: 96rpx;height: 96rpx;"></image> -->
						<view style="flex: 1;margin-left: 24rpx;font-size: 28rpx;">
							<view style="display: flex;justify-content: space-between;">
								<view style="color: #111111;">
									<view style="font-weight: bold;">{{ item.junior_name }}</view>
									<view style="font-size: 24rpx;color: #999CA3;margin-top: 4rpx;" v-if="item.createtime">
										加入时间：{{ item.createtime }}
									</view>
								</view>
								<!-- 0金色 1灰色 2绿色 3蓝色 4红色 -->
								<view style="margin-left: 20rpx;" v-if="item.identity == 2">
									<text style="font-size: 20rpx;color: #19be6b;background: #dbf1e1;
									padding: 4rpx 12rpx;border-radius: 8rpx;">注册用户</text>
								</view>
								<view style="margin-left: 20rpx;" v-if="item.identity == 3">
									<text style="font-size: 20rpx;color: #2979ff;background: #ecf5ff;
									padding: 4rpx 12rpx;border-radius: 8rpx;">推广达人</text>
								</view>
								<view style="margin-left: 20rpx;" v-if="item.identity == 4">
									<text style="font-size: 20rpx;color: #fa3534;background: #fef0f0;
									padding: 4rpx 12rpx;border-radius: 8rpx;">推广团长</text>
								</view>
								<view style="margin-left: 20rpx;" v-if="item.identity == 1">
									<text style="font-size: 20rpx;color: #909399;background: #f4f4f5;
									padding: 4rpx 12rpx;border-radius: 8rpx;">普通会员</text>
								</view>
								<view style="margin-left: 20rpx;" v-if="item.identity == 0">
									<text style="font-size: 20rpx;color: #ffea00;background: #fffff6;
									padding: 4rpx 12rpx;border-radius: 8rpx;">铁班底</text>
								</view>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 16rpx;" v-if="item.createtime">
								<view style="color: #999CA3;">下级数量：{{ item.xjCount }}</view>
								<view>
									<u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
								</view>
							</view>
						</view>
						
					</view>
				
				</view>
				
				<view style="margin-top: 32rpx;padding: 24rpx;color: #fff;
				border-radius: 16rpx;text-align: center;background: #fab6b6;" @click="chongzhi" v-if="iskeyword">
					重 置
				</view>
			</view>
			
		</view>
        <!--选择分类（无限级）end -->
		
		
		
		
		<u-toast ref="uToast" />
    </view>
</template>
 
<script>
	import { request } from 'utils/request.js';
    export default {
        components: {},
        data() {
            return {
				keyword: '',
				iskeyword: false,
				omeData: {},
				
                showca: false,
                product: {
                    productid: 0,
                    productname: '',
                    brandname: '',
                    categoryid: 0,
                    unit: '',
                    unitprice: 0,
                    usefeel: '',
                    code: '',
                    strsx: '',
                    strimg: '',
                    ThumbnailImage: '',
                },
                cafullname: '',
                tabs: [{
                    user_id: 0,
                    junior_name: "请选择"
                }],
                currentIndex: 0,
                calist: [{
					"user_id": 0,
					"junior_name": "请先搜索后再选择下级",
					"xjCount": 0
                }, ],
                fileList1: [], //图片集合
            }
        },
        onLoad() {
            // console.log(common.apiurl, 'apiurl');
            // this.getcalist(97);
        },
        methods: {
			// 搜索
			onSearch(){
				if(this.keyword == ''){
					this.$refs.uToast.show({ title: '请输入手机号码后查询' });
					return
				}
				request.get({
					url: '/relationship/getfullpathOne',
					data: { 'phone': this.keyword }
				}).then(res=>{
					console.log('数据：', res);
					if(res.code == 1){
						this.omeData = res.data;
						this.iskeyword = true;
						let user_id = res.data.user_id;
						this.tabs = [{
						    user_id: 0,
						    junior_name: "请选择"
						}];
						this.getcalist(user_id);
					}else{
						this.iskeyword = false;
						this.$refs.uToast.show({ title: res.msg });
					}
				});
			},
			// 重置
			chongzhi(){
				let user_id = this.omeData.user_id;
				this.tabs = [{
				    user_id: 0,
				    junior_name: "请选择"
				}];
				this.getcalist(user_id);
			},
            // 获取下级
            getcalist(caid) {
                var that = this;
				request.get({
					url: '/relationship/getfullpath',
					data: { 'uid': caid }
				}).then(res=>{
					console.log('数据列表：', res);
					that.calist = res.data;
				});
			},
            // 变更分类选项卡
            changeTabs(e) {
				let tabslength = this.tabs.length - 2;
				if(e == tabslength){
					return
				}
				this.currentIndex = e;
				let user_id = this.tabs[e].user_id;
				// 示例使用
				let matrix = this.tabs;
				let indexToRemove = e;
				let newMatrix = this.removeSubarrays(matrix, indexToRemove)
                this.getcalist(user_id);
            },
			// 分类重铸
			removeSubarrays(matrix, index) {
				let indexsum = index + 1;
				for (var i = indexsum; i <= matrix.length; i++) {
					console.log(i)
					matrix.splice(i, 1); // 移除指定下标的数组
				}
				matrix.pop();
				matrix.push({
				    user_id: 0,
				    junior_name: '请选择',
				    parentID: 0
				});
				return matrix; // 返回修改后的二维数组
			},
            //跳转到下级分类列表
            toxiaji(ca) {
                var that = this;
                console.log('ca：', ca);
				if(ca.user_id == 0){
					return;
				}
				if(that.tabs[0].user_id > 0){
					that.tabs.pop();
					
					// 已经选择一个了
					that.tabs.push({
					    user_id: ca.user_id,
					    junior_name: ca.junior_name,
					    parentID: ca.junior_pid
					});
					
					if (ca.xjCount != 0) {
					    //有下级，新加一个选项卡, 取下级列表
					    that.tabs.push({
					        user_id: 0,
					        junior_name: '请选择',
					        parentID: 0
					    });
					    console.log(JSON.stringify(that.tabs), '当前选项卡')
					    that.currentIndex = that.tabs.length - 1;
					    console.log(that.currentIndex, '当前选项卡索引')
										 
					    that.getcalist(ca.user_id)
					} else {
					    console.log(that.tabs, that.currentIndex)
					    that.currentIndex = that.tabs.length - 1;
					}
				}else{
					// 第一次选择
					that.tabs[0] = ca;
					if (ca.xjCount != 0) {
					    //有下级，新加一个选项卡, 取下级列表
					    that.tabs.push({
					        user_id: 0,
					        junior_name: '请选择',
					        parentID: 0
					    });
					    console.log(JSON.stringify(that.tabs), '当前选项卡')
					    that.currentIndex = that.tabs.length - 1;
					    console.log(that.currentIndex, '当前选项卡索引')
										 
					    that.getcalist(ca.user_id)
					} else {
					    console.log(that.tabs, that.currentIndex)
					    that.currentIndex = that.tabs.length - 1;
					}
				}
            },
        }
    }
</script>
 
<style>
	page{
		background-color: #F5F8FF !important;
	}
</style>